<template>
  <div>
    <div class="menu">
      
      <div class="menu-left">
        <ul>
          <li class="menu-item" 
          v-for="(item,index) in menus" 
          :key="index"
          @click="clickList(index)"
          :class="{current: currentIndex==index}">
            <p class="text">{{item.name}}</p>
          </li>
        </ul>
      </div>

      <div class="menu-right" ref="itemList">
        <ul>
          <li class="cate" v-for="(menu,index1) in menus" :key="index1">
            <h4 class="cate-title">{{menu.name}}</h4>
            <ul class="cate-item">
              <li v-for="(item,index2) in menu.sub" :key="index2">
                <router-link :to="'/goodslist/'+item.id" class="cate-item-wrapper">
                  <div class="cate-item-img">
                    <img :src="item.image" alt="">
                  </div>
                  <span>{{item.name}}</span>
                </router-link>
              </li>
            </ul>
          </li>
        </ul>
      </div>

    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  data() {
    return {
      menus: [],
      // 记录用户点中的那一个一级分类的索引
      currentIndex: 0,
      rightLiTops: []
    }
  },
  created() {
    this.getMenu();
  },
  methods: {
    getMenu() {
      this.$indicator.open({
        text: '加载中...'
      });
      // 发送请求，获取分类信息
      this.$http.get('category').then(res => {
        console.log(res.data.data);
        this.$indicator.close();
        this.menus = res.data.data;
      }).catch(() => {
        this.$toast('请求失败');
      })
    },
    clickList(index) {
      this.currentIndex = index;
      // 根据索引，去定位右侧盒子的位置
      this.rightBScroll.scrollTo(0, -this.rightLiTops[index]);
    },
    _initBScroll() {
      // 为什么要加 this
      this.leftBScroll = new BScroll('.menu-left', {
        click: true,
        // 启用滚轮
        mouseWheel: true,
      });
      this.rightBScroll = new BScroll('.menu-right', {
        click: true,
        hasVerticalScroll: true,
        // 启用滚轮
        mouseWheel: true,
        // 同时监听滚轮滚动 和 鼠标拖动
        probeType: 3
      });
      // 监听二级区域的滚动事件
      this.rightBScroll.on('scroll', pos => {
        let scrollY = -pos.y;
        for(var i = 0; i < this.rightLiTops.length - 1; i++) {
          if(scrollY >= this.rightLiTops[i] && scrollY < this.rightLiTops[i+1]) {
            this.currentIndex = i;
          }
        }
      });
    },
    _initRightHeight() {
      const itemArray = [];
      let top = 0;
      // 将第一个二级分类的定位值加入到itemArray中
      itemArray.push(top);
      // 获取所有的二级分类盒子
      const allList = this.$refs.itemList.getElementsByClassName('cate');
      for(var i = 0; i < allList.length; i++) {
        top += allList[i].clientHeight;
        itemArray.push(top);
      }
      this.rightLiTops = itemArray;
    }
  },
  watch: {
    menus() {
      // this.$nextTick函数 会在页面渲染完成之后去调用
      this.$nextTick(() => {
        // 初始化BScroll
        this._initBScroll();
        // 记录右边每个小盒子的高度
        this._initRightHeight();
      })
    },
  }
}
</script>

<style lang="scss" scoped>
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.menu {
  display: flex;
  position: absolute;
  text-align: center;
  top: 40px;
  bottom: 50px;
  width: 100%;
  overflow: hidden;
  .menu-left {
    flex: 0 0 80px;
    width: 80px;
    background: #f3f5f7;
    .menu-item {
      height: 54px;
      width: 100%;
      .text {
        width: 100%;
        line-height: 54px;
        margin-bottom: 0;
      }
    }
    .current {
      width: 100%;
      background: #fff;
      .text {
        color: red;
      }
    }
  }
  .menu-right {
    flex: 1;
    background: #fff;
  }
}
.menu-right {
  flex: 1;
  background: #fff;
  .cate {
    height: 100%;
    .cate-title {
      margin: 0;
      text-align: left;
      font-size: 14px;
      color: #333;
      font-weight: bold;
      padding: 10px;
    }
    .cate-item {
      padding: 7px 10px 10px;
      display: flex;
      overflow: hidden;
      flex-flow: row wrap;
      li {
        width: 33.3%;
        .cate-item-wrapper {
          .cate-item-img {
            width: 100%;
            img {
              width: 70px;
              height: 70px;
            }
          }
          span {
            display: inline-block;
            font-size: 14px;
            color: #333;
          }
        }
      }
    }
  }
}


</style>